<template>
    <div class="container-content">
        <div class="app-view-box">
            <el-row>
                <el-col :span="24">
                    <h1 class="panel-title">合同模板</h1>
                </el-col>
            </el-row>
            <el-row justify="end" class="export-container">
                <el-col :span="1.5" style="margin-right: 10px">
                    <el-button
                        type="primary"
                        icon="el-icon-plus"
                        size="mini"
                        @click="addContract"
                        v-hasPermi="['system:dept:add']"
                        >新增
                    </el-button>
                </el-col>
                <el-form
                    :model="queryParams"
                    ref="queryForm"
                    :inline="true"
                    v-show="showSearch"
                >
                    <el-form-item label="部门名称" prop="deptName">
                        <el-input
                            v-model="queryParams.deptName"
                            placeholder="请输入部门名称"
                            clearable
                            size="small"
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="cyan"
                            icon="el-icon-search"
                            size="mini"
                            @click="search"
                            >搜索</el-button
                        >
                        <el-button
                            icon="el-icon-refresh"
                            size="mini"
                            @click="reset"
                            >重置</el-button
                        >
                    </el-form-item>
                </el-form>
                <right-toolbar
                    :showSearch.sync="showSearch"
                    @queryTable="getDataList"
                    style="display: flex"
                ></right-toolbar>
            </el-row>
            <div class="container_table">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column
                        align="center"
                        type="index"
                        width="50"
                        label="序号"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="tempName"
                        label="模板名称"
                    ></el-table-column>
                    <el-table-column
                        prop="createTime"
                        label="创建时间"
                    ></el-table-column>
                    <el-table-column align="center" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-tooltip
                                class="item"
                                effect="dark"
                                content="详情"
                                placement="bottom"
                            >
                                <el-button
                                    plain
                                    icon="el-icon-more"
                                    @click="preview(scope.row)"
                                    size="mini"
                                ></el-button>
                            </el-tooltip>
                            <el-tooltip
                                class="item"
                                effect="dark"
                                content="编辑"
                                placement="bottom"
                            >
                                <el-button
                                    type="primary"
                                    plain
                                    icon="el-icon-edit"
                                    @click="edit(scope.row)"
                                    size="mini"
                                ></el-button>
                            </el-tooltip>
                            <el-tooltip
                                class="item"
                                effect="dark"
                                content="删除"
                                placement="bottom"
                            >
                                <el-button
                                    type="danger"
                                    plain
                                    icon="el-icon-delete"
                                    @click="
                                        handleDelete(scope.row, scope.$index)
                                    "
                                    size="mini"
                                ></el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-pagination
            class="table-pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
        <previewDailog
            :previewVisible.sync="previewVisible"
            :contractTempContent="contractTempContent"
            :contractName="contractName"
        />
        <!-- 弹出框 -->
        <el-drawer
            :title="rowId ? '编辑合同模板' : '新增合同模板'"
            :visible.sync="drawer"
             :before-close="handleClose"
            direction="rtl"
            size="100%"
            destroy-on-close
        >
            <div class="drawer-content">
                <FormCom ref="formRef" :id="rowId" />
                <!-- <EditFormCom v-else ref="editRef"  /> -->
            </div>
            <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取 消</el-button>
                <el-button type="primary" @click="submit">保存</el-button>
            </div>
        </el-drawer>
        <!-- <el-drawer
            title="客户详情"
            :visible.sync="showDetail"
            direction="ttb"
            :before-close="handleClose"
            size="100%"
            show-close
        >
            <DetailFormCom />
        </el-drawer> -->
    </div>
</template>

<script>
import FormCom from './add'
import previewDailog from "./dialog";
import { getContractList, deleteContractList } from "@/api/contract";
export default {
    components: { previewDailog, FormCom },
    data() {
        return {
            contractName: "",
            search_value: "", //搜索值
            currentPage: 1, //当前页
            pageSize: 10, //每页条数
            total: 0,
            drawer:false,
            tableData: [],
            previewVisible: false,
            contractTempContent: "",
            rowId:"",
            // 显示搜索条件
            showSearch: true,
            // 查询参数
            queryParams: {
                deptName: undefined,
                status: undefined,
            },
        };
    },
    methods: {
        //获取list
        async getDataList() {
            const query = {
                changeTime: "",
                contractTempContent: "",
                contractName: "",
                createTime: "",
                id: "",
                isUsed: "",
                limit:this.pageSize,
                page:this.currentPage,
                supplierId: "",
                tempName: this.search_value,
            };
            let res = await getContractList(query);
            if (res.code === 200) {
                this.tableData = res.rows;
                this.total = res.total;
            }
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.getDataList();
        },
        //搜索
        search() {
            this.getDataList();
        },
        //重置
        reset() {
            this.search_value = "";
            this.getDataList();
        },
        //分页器size
        handleSizeChange(val) {
            this.pageSize = val;
            this.getDataList();
        },
        //分页器当前页
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getDataList();
        },
        //查看
        preview(row) {
            this.contractTempContent = row.contractTempContent;
            this.contractName = row.tempName;
            this.previewVisible = true;
        },
        //新增
        addContract() {
           this.drawer = true
        },
        //编辑
        edit(row) {
            this.drawer = true
            this.rowId = row.id
        },
        //删除
        handleDelete(row) {
            this.$confirm("是否删除该模板?", "删除模板", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    deleteContractList(row.id).then((res) => {
                        if (res.code === 200) {
                            this.$message({
                                message: "删除成功",
                                type: "success",
                            });
                            this.getDataList();
                        } else {
                            this.$message({
                                message: "删除失败",
                                type: "error",
                            });
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        submit(){
            const cb = ()=>{
                this.drawer = false;
                this.getDataList();
            }
            this.$refs.formRef.save(cb)
        },
        cancelForm(){
            this.drawer = false;
            this.rowId = "";
            this.getDataList();
        },
         // 关闭 drawer
         handleClose(done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    done();
                    this.rowId = "";
                    this.getData();
                })
                .catch((_) => {});
        },
    },
    mounted() {
        this.getDataList();
    },
};
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    padding: 5px 10px;

    .container_title {
        border-bottom: 1px solid #ccc;
        padding: 10px 0;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .container_title_left {
            display: flex;
            align-items: center;
        }

        .container_title_right {
            .add_btn {
                width: 100px;
            }
        }
    }

    .container_table {
        margin-top: 10px;
    }
}
.export-container {
    margin: 15px 0;
}
</style>
